<template>
	<el-scrollbar :max-height="300">
		<div ref="cascaderItem" class="cascaderItem d-flex">
			<div>
				<div v-for="(item, index) in options" :key="index" :class="['mb-1', 'items', isUnfold(item)]"
					@click.stop="unfold(item)">
					<div class="d-flex jc-between ai-center">
						<div class="d-flex ai-center mr-2">
							<div class="circle mr-2" @click.stop="clickItem(item)">
								<div :class="['check', isCheck(item)]"></div>
							</div>
							<p :class="['font-lan-m', isCheck(item)]">{{ item[label] }}</p>
						</div>
						<el-icon v-if="item[children] && item[children].length > 0">
							<ArrowRightBold />
						</el-icon>
					</div>
				</div>
			</div>
			<cascaderItem v-if="options && options.length > 0" :options="list" :selectItems="selectItems"
				:modelValue="modelValue" :label="label" :value="value" :level="level + 1" @unfoldChange="unfoldChange"
				@change="change" />
		</div>
	</el-scrollbar>
</template>
    
<script lang="ts">
import {
	ref,
	reactive,
	computed,
	onMounted,
	onBeforeMount,
	onBeforeUnmount,
	defineComponent,
} from "vue";
import cascaderItem from './cascaderItem.vue'

// 声明类型
const PropsType = {
	options: {
		type: Array,
		default: [],
		require: true
	},
	selectItems: {
		type: Array,
		default: [],
		require: true
	},
	modelValue: {
		type: Array,
		default: [],
		require: true
	},
	label: {
		type: String,
		default: 'label',
	},
	value: {
		type: String,
		default: 'value',
	},
	children: {
		type: String,
		default: 'children',
	},
	level: {
		type: Number,
	}
} as const

// 声明类型
export default defineComponent({
	name: 'cascaderItem',
	props: PropsType,
	components: {
		cascaderItem
	},
	setup(props, context) {
		//变量
		const list = computed(() => {
			return props.selectItems[props.level] && props.selectItems[props.level][props.children]
		})
		const cascader = ref(null)
		const cascaderPopper = ref(null)
		const cascaderData = reactive({
			top: 0,
			left: 0,
			minWidth: 0
		})
		const cascaderL = require("@/assets/img/select-left.png");
		const cascaderR = require("@/assets/img/select-right.png");
		const clear = require("@/assets/img/close-circle.png");
		const showcascader = ref(false)
		const show = () => {
			let data = cascader.value.getBoundingClientRect()
			cascaderData.top = data.top + data.height + 10
			cascaderData.left = data.left
			cascaderData.minWidth = data.width
			showcascader.value = !showcascader.value
		}

		const clickClear = () => {
			context.emit('update:modelValue', [])
			context.emit('change', [])
		}

		const unfold = (val) => {
			//
			context.emit('unfoldChange', { level: props.level, data: val })
		}

		const unfoldChange = (val) => {
			context.emit('unfoldChange', val)
		}

		const clickItem = (val) => {
			context.emit('unfoldChange', { level: props.level, data: val })
			context.emit('change', val)
		}

		const change = (val) => {
			context.emit('change', val)
		}


		const getLabel = (val) => {
			return props.options.find(item => item[props.value] == val)[props.label]
		}

		const isUnfold = (val) => {
			return props.selectItems[props.level] && (val[props.children] && val[props.children].length > 0) && val[props.value] == props.selectItems[props.level][props.value] ? 'unfold' : ''
		}

		const isCheck = (val) => {
			return props.modelValue.length > 0 && val[props.value] == props.modelValue[props.modelValue.length - 1][props.value] ? 'isCheck' : ''
		}

		const closecascaderHandler = (e) => {
			//获取DOM元素的引用
			if (e.target.id == 'cascader') return
			if (cascader.value && cascader.value.contains(e.target)) {
				return;
			}
			showcascader.value = false;
		};

		onBeforeMount(() => {
			// 在DOM元素渲染之前开始监听mousedown事件
			document.body.addEventListener("mousedown", closecascaderHandler);
		});

		onBeforeUnmount(() => {
			// 在Vue文件销毁的时候移除这个事件
			document.body.removeEventListener("mousedown", closecascaderHandler);
		});

		onMounted(() => {
			//

		})

		// return
		return {
			cascader,
			cascaderPopper,
			cascaderL,
			cascaderR,
			clear,
			showcascader,
			cascaderData,
			clickClear,
			getLabel,
			show,
			clickItem,
			unfold,
			list,
			change,
			unfoldChange,
			isUnfold,
			isCheck
		};
	},

});
</script>
    
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.cascaderItem {
	flex: 1;

	.items {
		position: relative;
		padding: 4px 8px;
		background: rgba(20, 69, 102, 1);
		border-radius: 4px;
		opacity: 1;

		.circle {
			width: 14px;
			height: 14px;
			border-radius: 50%;
			opacity: 1;
			border: 2px solid #d9d9d999;
			display: flex;
			justify-content: center;
			align-items: center;

			.check {
				width: 6px;
				height: 6px;
				background: rgba(217, 217, 217, 0);
				border-radius: 50%;
				opacity: 1;
			}

			.isCheck {
				background: #25b3c7;
			}
		}

		.isCheck {
			color: #25b3c7 !important;
		}
	}

	.items:hover {
		background: linear-gradient(270deg, #529ACC00 0%, #8AC1E5 100%);
	}

	.active {
		background: linear-gradient(270deg, #ccb17a00 0%, #E5D38A 100%);
		opacity: 1;
	}

	.unfold {
		background: linear-gradient(270deg, #ccb17a00 0%, #e5d38a91 100%);
		opacity: 1;
	}
}</style>
    